<template>
  <div>
    <a-page-header class="pt-0" @back="back" :title="t('填写表单')"></a-page-header>
    <a-spin :spinning="table.loading" class="w-[100%]">
      <a-form layout="vertical" @finish="submit" :rules="formRules" :model="form" ref="formRef">
        <a-row>
          <a-col :span="12">
            <a-card :bordered="false" :body-style="{ paddingTop: '0' }">
              <a-form-item :label="t('商品名称')" name="goodsName">
                <a-input allow-clear v-model:value="form.goodsName" />
              </a-form-item>
              <a-form-item :label="t('条形码')" name="barCode">
                <a-input allow-clear v-model:value="form.barCode" />
              </a-form-item>

              <a-form-item :label="t('会员价')" name="memberPrice">
                <a-input-number class="w-[100%]" allow-clear v-model:value="form.memberPrice" />
              </a-form-item>

              <a-form-item :label="t('零售价')" name="memberPrice">
                <a-input-number class="w-[100%]" allow-clear v-model:value="form.retailPrice" />
              </a-form-item>

              <a-form-item :label="t('促销价')" name="memberPrice">
                <a-input-number class="w-[100%]" allow-clear v-model:value="form.salePrice" />
              </a-form-item>

              <div class="flex gap-4">
                <a-button type="primary" htmlType="submit">{{ t('保存') }}</a-button>
                <a-button @click="reset">{{ t('重置') }}</a-button>
              </div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-tabs>
              <a-tab-pane key="1" tab="其他字段">
                <a-card>
                  <a-form-item v-for="item in fields" :label="t(item.label)">
                    <a-input v-model:value="(form as any)[item.key]" allow-clear></a-input>
                  </a-form-item>
                </a-card>
              </a-tab-pane>
              <a-tab-pane key="2" tab="附加字段">
                <template v-if="form.expands?.length > 0">
                  <a-form-item
                    v-for="(item, key) in form.expands"
                    :key="key"
                    :label="item.fieldName"
                  >
                    <a-input
                      v-model:value="item.value"
                      allow-clear
                      :max-length="250"
                      show-word-limit
                    />
                  </a-form-item>
                </template>
                <a-empty v-else />
              </a-tab-pane>
            </a-tabs>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import type { IResponse } from '@/api/config/types';
import { list } from '../data/curd';
import { allowEditMenu, table } from '../data/data';
import { fields } from '../data/options';
import { formRef, form, formRules } from '../data/form';
const { t } = useI18n();
import { addGoods, updateGoods } from '@/api/modules/data/goods';
import { notify } from '@/utils/common/common';

const back = () => {
  allowEditMenu.value = false;
  reset();
};
const submit = async () => {
  table.value.loading = true;
  let result: IResponse | undefined = undefined;
  if (!form.value.goodsId) {
    const { data } = await addGoods(form.value);
    result = data;
  } else {
    const { data } = await updateGoods(form.value);
    result = data;
  }
  notify(result);
  await list();
  back();
};
const reset = () => {
  formRef.value?.resetFields();
};
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
}
:deep(.ant-tabs-content-holder) {
  height: 650px;
  overflow-y: auto;
}
</style>
